<template>
	<view class="bank-account-page">
		<uni-forms ref="bindBankRef" :rules="bindBankRules" :modelValue="bankInfo" validateTrigger="blur"
			label-position="top">
			<view class="header">
				<uni-icons custom-prefix="iconfont" type="icon-tianjiayinhangka-mianxing" color="#cdcde5"
					size="26"></uni-icons>
				<text>{{isBindBank ? $t('Page.user.ndskxx') : $t('Page.user.ndskxx') }}</text>
			</view>
			<uni-forms-item label-width="200px" name="phone" :label="$t('Page.user.shj')">
				<uni-easyinput maxlength="30" :styles="styles" primaryColor="#33C38F" v-model.trim="bankInfo.phone"
					:clearable="false" />
			</uni-forms-item>
			<uni-forms-item label-width="200px" name="cpf" label="CPF">
				<uni-easyinput maxlength="30" :styles="styles" primaryColor="#33C38F" v-model.trim="bankInfo.cpf"
					:clearable="false" />
			</uni-forms-item>
			<uni-forms-item label-width="200px" name="name" :label="$t('Page.user.mz')">
				<uni-easyinput maxlength="30" :styles="styles" primaryColor="#33C38F" v-model.trim="bankInfo.name"
					:clearable="false" />
			</uni-forms-item>
			<uni-forms-item label-width="200px" name="email" :label="$t('Page.user.yx')">
				<uni-easyinput maxlength="30" :styles="styles" primaryColor="#33C38F" v-model.trim="bankInfo.email"
					:clearable="false" />
			</uni-forms-item>
			<uni-forms-item label-width="200px" name="pix" label="PIX">
				<uni-easyinput maxlength="30" :styles="styles" primaryColor="#33C38F" v-model.trim="bankInfo.pix"
					:clearable="false" />
			</uni-forms-item>
			<view class="submit-wrap">
				<waves class="depositBtn" @onTap="confirm('bindBankRef')">
					{{ isBindBank ? $t('Page.user.qrxg') :  $t('Page.user.qrtj') }}
				</waves>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import {
		sendMessage
	} from '@/api/websocket.js'
	import {
		Debounce,
		showToast,
		checkEmail
	} from '@/utils/common.js'
	import {
		validarCPF
	} from '@/utils/function/reg.js'
	export default {
		data() {
			return {
				styles: {
					borderColor: '#2e363f',
					color: '#fff',
					backgroundColor: '#242A32'
				},
				bindBankRules: {
					phone: {
						rules: [{
								required: true,
								errorMessage: this.$t('Page.user.srsjh')
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value.length < 10 || value.length > 13) {
										callback(this.$t('Page.user.sjgsbd'))
									}
									return true
								}
							}
						]
					},
					cpf: {
						rules: [{
								required: true,
								errorMessage: this.$t('Page.user.srcpf')
							},
							{
								validateFunction: (rule, value, data, callback) => {
									if (!validarCPF(value)) {
										callback(this.$t('Page.user.cpfbd'))
									}
									return true
								}
							}
						]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: this.$t('Page.user.srmz')
						}]
					},
					email: {
						rules: [{
								required: true,
								errorMessage: this.$t('Page.user.sryx')
							},
							{
								validateFunction: (rule, value, data, callback) => {
									if (!checkEmail(value)) {
										callback(this.$t('Page.user.yxbd'))
									}
									return true
								}
							}
						]
					},
					pix: {
						rules: [{
							required: true,
							errorMessage: this.$t('Page.user.srpix')
						}]
					}
				},
				bankInfo: {
					phone: '',
					cpf: '',
					name: '',
					email: '',
					pix: ''
				},
				isBindBank: false
			}
		},
		created() {
			this.getWalletInfo()
		},
		methods: {
			getWalletInfo() {
				const {
					USERWALLET
				} = this.$api
				sendMessage({
					flag: USERWALLET
				})
				uni.$once(USERWALLET, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.isBindBank = data.userinfo.bank instanceof Object
						if (this.isBindBank) {
							this.bankInfo = data.userinfo.bank
							delete this.bankInfo.status_text
						}
					}
				})
			},
			// 使用 Debounce 修饰符，实现防抖效果
			submit: Debounce(function() {
				const {
					ADDBANK
				} = this.$api
				sendMessage({
					flag: ADDBANK,
					content: this.bankInfo
				})
				uni.$once(ADDBANK, (res) => {
					const {
						code,
						data,
						msg
					} = res
					showToast(msg)
					if (code === 1) {
						this.getWalletInfo()
					}
				})
			}, 500),
			confirm(ref) {
				this.$refs[ref].validate().then(res => {
					this.submit()
				}).catch(err => {})
			},
		}
	}
</script>

<style lang="less" scoped>
	.bank-account-page {
		display: flex;
		justify-content: center;

		.header {
			margin-bottom: 20px;
			display: flex;
			align-items: center;

			text {
				margin-left: 10px;
				color: #adadc2;
				font-size: 20px;
			}
		}


		.uni-forms {
			width: 500px;
			padding: 0 15px;

			/deep/.uni-forms-item__label {
				color: #adadc2;
				font-weight: 700;
				font-size: 14px;
			}

			/deep/.uni-easyinput__content {
				border-width: 2px;

				&:hover {
					border-color: #000 !important;
				}
			}

			.submit-wrap {
				width: 100%;
				display: flex;
				justify-content: center;
				margin: 30px auto 6px;
				color: #fff;

				.depositBtn {
					color: #fff;
					font-size: 14px;
					color: #fff;
					background: #33c38f;
					width: 100%;
					text-align: center;
					font-weight: 700;
					height: 52px;
					line-height: 52px;
					border-radius: .2rem;
					box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
				}
			}
		}
	}
</style>